<template>
  <div class="data-display">
    <basic-container>
      <el-row :span="24">
        <el-col v-for="(item,index) in option.data" :key="index" :span="option.span">
          <div class="item" :style="{color:option.color}">
            <h5 class="count">{{item.count}}</h5>
            <span class="splitLine" />
            <p class="title">{{item.title}}</p>
          </div>
        </el-col>
      </el-row>

    </basic-container>
  </div>
</template>

<script>
import Config from '@myconfig/config.min.js'
import BasicContainer from '@vue-materials/basic-container';
export default {
  components: { BasicContainer },
  name: 'data-display',
  data() {
    return {
      option: {
        span: 4,
        color: '#15A0FF',
        data: [
          {
            count: NaN,
            title: '今日入职',
          },
          {
            count: NaN,
            title: '本月入职',
          },
          {
            count: NaN,
            title: '伯乐总数',
          },
          {
            count: NaN,
            title: '今日简历',
          },
            {
                count: NaN,
                title: '人才总数',
            },
            {
                count: NaN,
                title: '在招职位总数',
            }
        ],
      },
    };
  },
  created() {},
  mounted() {
    this.$http.get(Config.baseUrl + '/api/system/counts/all').then(
      function(rsp){
        this.option.data[0].count = rsp.data.data.finishDayCount
        this.option.data[1].count = rsp.data.data.finishMonthCount
        this.option.data[2].count = rsp.data.data.boleNum
        this.option.data[3].count = rsp.data.data.resumeDayNum
          this.option.data[4].count = rsp.data.data.resumesAllCount
          this.option.data[5].count = rsp.data.data.positionsAllCount
      },function(error){

      }
    )
  },
};
</script>
<style lang="scss" scoped>
@import './DataDisplay.scss';
</style>